<extend name="template/base_index" />


<block name="area_header">
    <link rel="stylesheet" type="text/css" media="all" href="__CSS__/wxshop.css">
    <link type="text/css" rel="stylesheet" src="__CDN__/jquery-uploadify/3.2.1/uploadify.css" />
    <link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/select2.min.css" />
    <link type="text/css" rel="stylesheet" href="__CDN__/select2/4.0.0/css/cosmo-skin.css" />

    <script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="__CDN__/jquery-validation/1.13.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="__CDN__/jquery-validation/1.13.1/localization/messages_zh.min.js"></script>
    <style type="text/css">
.pt8{width:2rem !important;padding-top: 8px;}
input.error {border: 1px solid red;}
label.checked {padding-left: 25px;}
label.error {padding-left: 25px;padding-bottom: 2px;font-weight: bold;color: #EA5200;}
.form-group-fix{
    padding-left:15px !important;
    padding-right:25px !important;
}
.text-error{color:red;}
    </style>

</block>

<block name="area_body">
    {:W('Menus/topbar')}
    <div class="admin-main container-fluid">
        {:W('Menus/left')}
        <div class="admin-main-content">
            {:W('Menus/breadcrumb')}
            <!-- 带验证 form -->
            <form id="gameForm" class="form-horizontal well validateForm">
                <fieldset>
                    <legend>#萌币商品# 添加</legend>
                    <div class="form-group">
                        <label for="inputname" class="col-md-2 col-lg-2 control-label"><span class="text-error">*</span>商品名</label>
                        <div class="col-md-8 col-lg-6 form-inline">
                            <input type="text" class="required form-control input-normal" name="name" id="inputname" placeholder="{:L('PLACEHOLDER_TITLE')}">(商品名)
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputbrand" class="col-md-2 col-lg-2 control-label">品牌</label>
                        <div class="col-md-8 col-lg-6 form-inline">
                            <input type="text" class="required form-control input-normal" name="brand" id="inputbrand" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                      <label for="inputnumber" class="col-md-2 col-lg-2 control-label">库存</label>
                      <div class="col-md-10 col-lg-10 form-inline">
                        <div class="form-group form-group-fix">
                          <div class="input-group">
                          <input type="text" class="form-control input-number" name="count" aria-label="" value="-1">件(-1表示无限)
                          </div>
                        </div>
                        <div class="form-group form-group-fix">
                            <div class="input-group">
                                <div class="input-group-addon">限购(0表示不限购)</div>
                                <input type="text" class="form-control input-number" name="buy_limit" value="0">
                            </div>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="type" class="col-md-2 col-lg-2 control-label">商品类型</label>
                      <div class="col-md-10 col-lg-10 form-inline">
                        <div class="form-group form-group-fix">
                          <div class="input-group">
                            <!-- <div class="input-group-addon">商品类型</div> -->
                            <select name="type" class="form-control" id="type">
                              <foreach  name="types" item="v">
                                  <option value="{$key}">{$v}</option>
                                </foreach >
                            </select>
                          </div>
                        </div>
                        <div class="form-group form-group-fix">
                            <div class="input-group hide">
                                <div class="input-group-addon">选择模板</div>
                                <select id="tpl-id" name="tpl_id" class="form-control"></select>
                            </div>
                            <div class="input-group">
                                <div class="input-group-addon">指定邮费(RMB)</div>
                                <input id="tpl-num" name="tpl_num" class="form-control input-number"  value="0"/>
                            </div>
                        </div>
                      </div>
                    </div>
                    <div class="form-group">
                        <label for="inputcnt" class="col-md-2 col-lg-2 control-label">商品描述</label>
                        <div class="col-md-8 col-lg-8">
                            <textarea name='detail'  style="height:300px" id="detail"></textarea>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="inputcnt" class="col-md-2 col-lg-2 control-label">兑换说明</label>
                        <div class="col-md-8 col-lg-8">
                            <textarea name='synopsis'  style="height:300px" id="synopsis">{$entry.synopsis}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="main_img" id="prizeIcon">
                        <label for="" class="col-md-2 col-lg-2 control-label">图标主图</label>
                        <div class="col-lg-10 col-md-10">
                            <span class="text-muted">(注意:上传或选择尺寸为1:1的图片,推荐400像素*400像素，大小不超过500kb)<i data-toggle="tooltip" class="fa fa-question" title=""></i></span>
                            <!-- 图片选择DOM结构 -->
                                <div class="wxuploaderimg clearfix main_img"  data-maxitems="1">
                                    <div class="img-preview clearfix" >
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus"></i>
                                    </div>
                                </div>
                            <!-- 图片选择DOM结构 -->
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputscore" class="col-md-2 col-lg-2 control-label">兑换萌币</label>
                        <div class="col-md-2 col-lg-2 input-number">
                            <input size="12" type="text" class="required form-control input-number" name=" score" id="inputscore" value="1" >
                        </div>
                        <div class="col-md-6 col-lg-6">萌币
                            <div class="help-block">(1+,正整数)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputprice" class="col-md-2 col-lg-2 control-label">兑换金额</label>
                        <div class="col-md-2 col-lg-2  input-number">
                            <input class="required form-control input-number inputspin" name="price" id="inputprice" type="text" size="12" value="0"/>
                        </div>
                        <div class="col-md-6 col-lg-6">RMB
                            <div class="help-block">(0+,保留2位小数点)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-md-2 col-lg-2 control-label">状态</label>
                        <div class="col-md-10 col-lg-10  input-number">
                            <input type="radio" class="" name="onshelf" id="" value="0">下架
                            <input type="radio" name="onshelf" id="" value="1" checked="checked">上架
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputsort" class="col-md-2 col-lg-2 control-label">排序</label>
                        <div class="col-md-2 col-lg-2 input-number">
                            <input size="12" type="text" class="required form-control input-number" name=" sort" id="inputsort" value="0" >
                        </div>
                        <div class="col-md-6 col-lg-6">序号
                            <div class="help-block">(整数,越大越靠前)</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="btns" class="col-md-2 col-lg-2 control-label">&nbsp;</label>
                        <div class="col-lg-10 col-md-10">
                            <a target-form="validateForm" class="ajax-post btn btn-primary" href="{:U(CONTROLLER_NAME.'/add',array('gid'=>$game['id']))}" autofocus="autofocus"  data-loading-text="{:L('BTN_SAVE')}..." ><i class="fa fa-save"></i> {:L('BTN_SAVE')}</a>
                            <a class="btn btn-default" href="{:U(CONTROLLER_NAME.'/index')}"><i class="fa fa-times-circle"></i> {:L('BTN_CANCEL')}</a>
                        </div>
                    </div>
                </fieldset>
            </form>
            <!-- form -->
        </div>
        <!-- END admin-main-content -->
    </div>
    <!-- END admin-main-->
    <include file="template/prizepicture" />
</block>

<block name="area_footer">
    <script src="__CDN__/select2/4.0.0/js/select2.min.js"></script>
    <script src="__CDN__/select2/4.0.0/js/i18n/zh-CN.js"></script>
    <script type="text/javascript" src="/Public/Upload/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" src="/Public/Upload/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script src="__CDN__/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
    <script type="text/javascript">
        var stype = 0;
        var $tpl_select2;
        $(function() {
            function showWithType(t){
                if(t == 2 || t == 3){
                    //红包 //优惠券
                    $('#tpl-id').parent().removeClass('hide');
                    $('#tpl-num').parent().addClass('hide');
                }else{
                    //实物 其他
                    $('#tpl-id').parent().addClass('hide');
                    $('#tpl-num').parent().removeClass('hide');
                }
            }
            // showWithType(0);
            $("select[name='type']").change(function(){
               stype = parseInt($(this).val());
               //清空select2
               //$('#tpl-id').val(null);
               $tpl_select2.val(null).trigger("change");
               showWithType(stype);
            });
            $tpl_select2 = $("#tpl-id").select2({
                width: "250",
                // allowClear: true,
                placeholder: "请选择模板"  ,
                language: "zh-CN",
                ajax: {
                    url: "{:U('ScoreGoods/select')}",
                    dataType: 'json',
                    delay: 250,
                    // type: "POST",
                    data: function (params) {
                        return {
                            q:params.term,
                            type:stype
                        };

                    },
                    processResults: function (data, params) {
                        // params.page = params.page || 1;
                        if(!data){
                            data = new Array();
                            data['nodata']="无相关数据";
                        }
                        return {
                            results: data,
                        };
                    },
                    cache: true
                },
                minimumResultsForSearch: Infinity,//不显示搜索框
                minimumInputLength:0,
                maximumInputLength:100,//限制最大字符，以防坑货
                templateSelection: function (repo) {
                    var selection = repo.name || repo.text;
                    if(repo.name){
                    }
                    return selection;
                },
                // formatInputTooShort: "请输入用户名",
                formatNoMatches: "没有匹配的模板",
                formatSearching: "查询中...",
                templateResult: function (repo) {

                    if (repo.loading) return repo.text;
                    if(repo.nodata)   return repo.nodata;
                    var markup = '<div>'+repo.name+'</div>';
                    return $(markup);
                },
            });

            var ue = UE.getEditor('detail',{
                toolbars: [
                   ['fullscreen', 'source', 'undo', 'redo', 'bold','italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', '|','lineheight'
       , 'fontsize', 'insertimage','emotion','link', 'unlink', 'anchor', '|','map','print', 'preview',  'drafts','forecolor','backcolor'
        ]
                ]
                // ,initialFrameWidth:1000
                ,initialFrameHeight:300
                ,autoHeightEnabled:false
            });
            var ue2 = UE.getEditor('synopsis',{
                toolbars: [
                     ['fullscreen', 'source', 'undo', 'redo', 'bold','italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', '|','lineheight'
       , 'fontsize','emotion','link', 'unlink', 'anchor', '|','print', 'preview',  'drafts','forecolor','backcolor'
        ]
                ]
                // ,initialFrameWidth:1000
                ,initialFrameHeight:300
                ,autoHeightEnabled:false
            });
            //图片上传
            wxuploadimg.init({cont:".wxuploaderimg"});

            // $(".inputspin").TouchSpin({initval: 0});
            $(".validateForm").validate();
            // $("#gameForm").validate({
            //     errorPlacement: function(error, element) {
            //         $(".checked", element.parent()).remove();
            //         error.appendTo(element.parent());
            //     },
            //     success: function(label) {
            //         label.removeClass("error").addClass("checked").text("验证成功!");
            //     },
            //     rules: {
            //         name: {
            //             required: true,
            //             remote: {
            //                 url: "{:U('Game/check_name')}"
            //             }
            //         }
            //     }
            // }) //end validate
        }); //end ready
    </script>
</block>